<template>
  <!-- tabs标签页 -->
  <view class="tabs">
    <view class="tab_item" :class="{cur:index === tabCur}" v-for="(item, index) in tabs" :key="index"
      @tap="tabSelect(index)">{{ item.name }}</view>
  </view>

  <!-- 标签页对应的内容 -->
  <block v-if="tabCur === 0">
    <view v-for="(item, index) in list1" :key="index" class="top">
      <view class='head'>
        <view class="left id">
          {{1425673311000+item.recyclableOrderId}}
        </view>
        <view class="right" style="color: red;">进行中</view>
      </view>
      <view class="middle">
        <image :src='item.image' style="height:200rpx;width: 200rpx;"></image>
        <view class="left">
          {{item.recyclableName}}￥{{item.recyclablePrice}}
        </view>
        <view class="right">x{{item.recyclableWeight}}</view>
      </view>
      <view class="price">
        <view class="right">总价：￥{{item.recyclablePrice*item.recyclableWeight}}</view>
      </view>
    </view>
  </block>
  <block v-else>
    <view v-for="(item, index) in list2" :key="index" class="top">
      <view class='head'>
        <view class="left id">
          {{1425673311000+item.recyclableOrderId}}
        </view>
        <view class="right" style="color: red;">已完成</view>
      </view>

      <view class="middle">
        <image :src='item.image' style="height:200rpx;width: 200rpx;"></image>
        <view class="left">
          {{item.recyclableName}}￥{{item.recyclablePrice}}
        </view>
        <view class="right">x{{item.recyclableWeight}}</view>
      </view>
      <view class="price">
        <view class="right">总价：￥{{item.recyclablePrice*item.recyclableWeight}}</view>
      </view>
    </view>
  </block>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [{
            id: 1,
            name: '进行中'
          },
          {
            id: 2,
            name: '已完成'
          },
        ],
        tabCur: 0, // 当前tabs下标
        list1: [],
        list2: [],
      }
    },
    onLoad(options) {
      this.tabCur = parseInt(options.key)
      // console.log(options)
      const that = this
      uni.request({
        url: getApp().globalData.baseUrl + '/getOnGoingOrders',
        method: 'post',
        data: {
          userId: uni.getStorageSync("userId")
        },
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        success(res) {
          // console.log(res)
          that.list1 = res.data
          // for (let i in list) {
          //   i['total'] = i["recyclablePrice"] * i["recyclableWeight"]
          // }
        }
      })
      uni.request({
        url: getApp().globalData.baseUrl + '/getCompletedOrders',
        method: 'post',
        data: {
          userId: uni.getStorageSync("userId")
        },
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        success(res) {
          that.list2 = res.data
        }
      })

    },
    methods: {
      // tab切换
      tabSelect(index) {
        if (this.tabCur === index) return
        this.tabCur = index
      },

    }
  }
</script>

<style lang="scss">
  .tabs {
    display: flex;
    justify-content: space-evenly;
    font-size: 32rpx;
    background-color: #FFF;
    color: #A9A9A9;
  }

  .id {
    color: #4f4f4f;
  }

  .tab_item {
    height: 114rpx;
    line-height: 100rpx;

    &.cur {
      position: relative;
      color: black;

      &::after {
        content: '';
        width: 36rpx;
        height: 6rpx;
        position: absolute;
        bottom: 20rpx;
        left: 50%;
        margin-left: -18rpx;
        background-color: #43a246;
      }
    }
  }

  .top {
    margin: 40rpx 20rpx 10rpx 20rpx;
    border: white 10rpx solid;
    border-radius: 10rpx;
    background-color: white;
  }

  .head,
  .price,
  .middle {
    display: flex;
    // justify-content: space-around;
    align-items: center;
  }

  .left {
    flex: 1;
    text-align: left;
  }

  .right {
    flex: 1;
    text-align: right;

  }

  // .middle {
  //   display: flex;
  //   justify-content: flex-start;
  // }
</style>